import { Button, Card, Checkbox, Form, message, Modal, Radio, Row, Col, Select, Input, InputNumber } from "antd";
import { connect } from "dva";
import React, { PureComponent } from "react";
import { transferOption } from "@/utils/common";
const FormItem = Form.Item;
export const repositoryHash = {
  '0': '主库',
  '1': '二库',
  '2': '二网',
};
@connect((state) => ({
  menu: state.menu,
  creditCar: state.creditCar,
}))
export default class movingCardModal extends PureComponent {
  formRef = React.createRef();
  state = {
    isDisabled: false,//默认移库，目标围栏默认置灰
    modalVisible: false,
    vin: '',//存储设置的当前vin
    currentFenceInfo: {},//当前所属围栏信息
    fenceList: [],//经销商的围栏列表list
    curStore: '',//当前仓库
    targetDealName: '',//目标围栏所属经销商
    targetStore: '',//目标围栏所属仓库
  };

  componentDidMount() {
    this.props.onRef(this)
    
  }
  showData = async (data) => {
    await this.setState({
      modalVisible: true,
    });
    this.setState({
      vin: data.vin,
      fenceList: data.fenceList,
      currentFenceInfo: data.currentFenceInfo,
      curStore: data.currentFenceInfo.repository,
    })
    //获取移库历史信息
    const values ={
      operateType: 1,
      vin: data.vin
    };
    this.props.dispatch({
      type: 'creditCar/postObjWithRes',
      payload: {
        url: '/mscreditbusiness/vehicle/credit/search/move', 
        ...values
      },
      callback: (res) => {
        if (res.statusCode == '0') {
          let targetDealName = '';
          let targetStore = '';
             if(res.data?.tgtsFenceId){
                 data.fenceList?.map((item)=>{
                     if(item.fenceId == res.data?.tgtsFenceId){
                          targetDealName = item.dealerName,
                          targetStore = item.repository
                        }
                     })
           }
          this.formRef.current.setFieldsValue({
            curFenceId: data.currentFenceInfo.fenceId,
            curDealName: data.currentFenceInfo.dealerName,
            curStore: repositoryHash[data.currentFenceInfo.repository] || '',
            targetFenceId: res.data?.tgtsFenceId || undefined,
            targetDealName: targetDealName,
            targetStore: repositoryHash[targetStore],
            timeLimit: res.data?.timeLimit || '',
          });
        } 
      },
    });
  }

  ok = (e) => {
    const { dispatch } = this.props;
    e.preventDefault();
    this.formRef.current.validateFields().then(values => {
      const obj = values;
     const params = {
      curFenceId: values.curFenceId,
      tgtsFenceId: values.targetFenceId,
      operateType : values.operateType,
      timeLimit : values.timeLimit,
      vin: this.state.vin,
     }
     dispatch({
      type: 'creditCar/postObjWithRes',
      payload: {
        url: '/mscreditbusiness/vehicle/credit/move', 
        ...params,
      },
      callback: (response) => {
        if (response.statusCode == '0') {
          message.success('设置成功');
        } 
        this.close();
      },
    });
    });
   };


  close = () => {
    this.formRef.current.resetFields();
    this.setState({ 
      modalVisible: false ,
      isDisabled: false,
    });
    this.formRef.current.setFieldsValue({
      operateType: 1,
    })
  };
  change=(e)=>{
    if(e.target.value === 2){
      this,this.setState({
        isDisabled: true
      })
      const values ={
        operateType: 2,
        vin: this.state.vin
      };
      this.props.dispatch({
        type: 'creditCar/postObjWithRes',
        payload: {
          url: '/mscreditbusiness/vehicle/credit/search/move', 
          ...values
        },
        callback: (res) => {
          if (res.statusCode == '0') {
            this.formRef.current.setFieldsValue({//借车  当前围栏与目标围栏一致
              curFenceId: this.state.currentFenceInfo.fenceId,
              curDealName: this.state.currentFenceInfo.dealerName,
              curStore: repositoryHash[this.state.currentFenceInfo.repository],
              targetFenceId: this.state.currentFenceInfo.fenceId,
              targetDealName: this.state.currentFenceInfo.dealerName,
              targetStore: repositoryHash[this.state.currentFenceInfo.repository],
              timeLimit: res.data?.timeLimit || '',
            });
          } 
        },
      });
    }else if(e.target.value === 1){//移库  目标围栏需要判断是否设置过
      this,this.setState({
        isDisabled: false
      })
      const values ={
        operateType: 1,
        vin: this.state.vin
      };
      this.props.dispatch({
        type: 'creditCar/postObjWithRes',
        payload: {
          url: '/mscreditbusiness/vehicle/credit/search/move', 
          ...values
        },
        callback: (res) => {
          if (res.statusCode == '0') {
            const {fenceList}=this.state;
            let targetDealName = '';
            let targetStore = '';
             if(res.data?.tgtsFenceId){
                 fenceList?.map((item)=>{
                     if(item.fenceId == res.data?.tgtsFenceId){
                          targetDealName = item.dealerName,
                          targetStore = item.repository
                        }
                     })
           }
            this.formRef.current.setFieldsValue({
              curFenceId: this.state.currentFenceInfo.fenceId,
              curDealName: this.state.currentFenceInfo.dealerName,
              curStore: repositoryHash[this.state.currentFenceInfo.repository],
              targetFenceId: res.data?.tgtsFenceId || undefined, 
              targetDealName: targetDealName,
              targetStore: repositoryHash[targetStore],
              timeLimit: res.data?.timeLimit || '',
            });
          } 
        },
      });
    }
  }
  targetFenceIdChange =(values)=>{
    const {fenceList}=this.state;
    let targetDealName = '';
    let targetStore = '';
    fenceList?.map((item)=>{
      if(item.fenceId == values){
        targetDealName = item.dealerName,
        targetStore = item.repository
      }
    })
    this.formRef.current.setFieldsValue({
      targetDealName: targetDealName,
      targetStore: repositoryHash[targetStore],
    });
  }
  renderSimpleForm() {
    const {isDisabled, modalVisible,fenceList,} = this.state;
    console.log('isDisabled', isDisabled)
    const footer = (
      <div>
        <Button onClick={this.close}>取消</Button>
        <Button  onClick={this.ok} type="primary">
          确定
        </Button>
      </div>
    );
    return (
      <div>
      <Modal
        footer={footer}
        title="移车管理"
        width={850}
        visible={modalVisible}
        onCancel={this.close}
        style={{ top: 50}}
      >
        <div style={{ marginLeft: 20 }}>
        <Form ref={this.formRef} >
          <FormItem
              name={"operateType"}
              initialValue={1}
             >
             <Radio.Group
                onChange={this.change}>
               <Radio value={1}>移库 </Radio>
               <Radio value={2}>借车 </Radio>
             </Radio.Group>
          </FormItem >
          <Card style={{backgroundColor:'#F5F5F5'}}> 
            <Row gutter={24}>
              <Col span={8}> 
                <FormItem label="当前围栏" 
                    name={"curFenceId"}
                    required>
                   <Select
                     placeholder="请选择"
                     disabled
                    >
                  {transferOption(fenceList, ["fenceId","fenceName"])}
              </Select>
              </FormItem>
              </Col>
              <Col span={8}>
              <FormItem label="所属经销商" name={"curDealName"}>
                   <Input  bordered={false}/>
              </FormItem>
              </Col>
              <Col span={8}> 
              <FormItem label="所属仓库" name={"curStore"}>
                   <Input  bordered={false} />
              </FormItem>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col span={8}> 
                <FormItem 
                 label="目标围栏"
                  name={"targetFenceId"}
                  rules={[{ required: true, message: '请选择目标围栏' },
                 ]}
                 >
                   <Select
                     placeholder="请选择"
                     disabled={isDisabled}
                     allowClear
                     onChange={this.targetFenceIdChange}
                    >
                 {transferOption(fenceList, ["fenceId","fenceName"])}
              </Select>
              </FormItem>
              </Col>
              <Col span={8}>
              <FormItem 
               label="所属经销商" 
                name={"targetDealName"}
               >
                   <Input  bordered={false}/>
              </FormItem>
              </Col>
              <Col span={8}> 
              <FormItem 
              label="所属仓库"
               name={"targetStore"}
              >
                   <Input  bordered={false}/>
              </FormItem>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col span={8}> 
                <FormItem label={isDisabled ? '借车时限' : '移库时限'}
                 name={"timeLimit"}
                 rules={[{ required: true, message: '请填写' },
                 {
                   pattern: /^[+]{0,1}([1-9][0-9]{0,})$|^[+]{0,1}([1-9][0-9]{0,}\.\d+)$|^[+]{0,1}([0]\.(?!0+$)\d{1,})$/,
                   message: "请填写大于0的数字"
                  }]}
                 >
                <InputNumber min={0}/>
              </FormItem>
               {/* <span className="ant-form-text"> 天 </span> */}
              </Col>
              <Col flex="0 0 80px">
                <Form.Item>天</Form.Item>
              </Col>
            </Row>
          </Card>
        </Form>
        </div>
      </Modal>
      </div>
    );
  }

  render() {
    return this.renderSimpleForm();
  }
}
